<template>
  <el-main>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first" class="a">
        <el-form :model="saveFrom" :rules="rules" ref="saveFrom" label-width="100px" class="demo-ruleForm">
          <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="saveFrom.name" placeholder="请输入楼盘名称" style="width: 700px"/>
          </el-form-item>
          <el-form-item label="楼盘地址" prop="address">
            <el-input v-model="saveFrom.address" placeholder="请输入楼盘地址" style="width: 700px"/>
          </el-form-item>
          <el-form-item label="城市地区" prop="address">
            <el-select v-model="saveFrom.province" placeholder="省" @change="getCity(),getSubwayList()">
              <el-option v-for="province in provinceList" :label="province.regionName" :value="province.regionId"/>
            </el-select>&emsp;
            <el-select v-model="saveFrom.city" placeholder="市" @change="getCounty()">
              <el-option v-for="city in cityList" :label="city.regionName" :value="city.regionId"/>
            </el-select>&nbsp;&nbsp;
            <el-select v-model="saveFrom.county" placeholder="区" @change="getBusiness()">
              <el-option v-for="county in countyList" :label="county.regionName" :value="county.regionId"/>
            </el-select>&nbsp;&nbsp;
          </el-form-item>
          <el-form-item label="商圈" prop="commercialArea">
            <el-checkbox-group v-model="commercialArea">
              <el-checkbox v-for="item in commercialAreaList" :label="item.name" value="item.code"
                           name="commercialArea"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="地铁" prop="subway">
            <el-checkbox-group v-model="subway">
              <el-checkbox v-for="item in subwayList" :label="item.subway" value="item.id" name="subway"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="建筑面积" prop="proportion">
            <el-input v-model="saveFrom.proportion" placeholder="建筑面积" style="width: 200px"/>
            平方米
          </el-form-item>
          <el-form-item label="建筑类型">
            <el-checkbox-group v-model="buildingType">
              <el-checkbox v-for="item in BuildingTypeList" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="社区类型" prop="communityType">
            <el-select v-model="saveFrom.communityType" placeholder="请选择">
              <el-option v-for="item in CommunityTypeList" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="物业类型" prop="premisesType">
            <el-checkbox-group v-model="premisesType">
              <el-checkbox v-for="item in PremisesTypeList" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
<!--          <el-form-item label="楼盘特色" >
            <el-checkbox-group v-model="saveFrom.propertyList">
              <el-checkbox v-for="item in remarkList" :label="item.id"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>-->
          <el-form-item label="容积率" prop="grossPlotRatio">
            <el-input v-model="saveFrom.grossPlotRatio" placeholder="容积率" style="width: 200px"/>
            平方米
          </el-form-item>
          <el-form-item label="得房率" prop="efficiency">
            <el-input v-model="saveFrom.efficiency" placeholder="得房率" style="width: 200px"/>
            %
          </el-form-item>
          <el-form-item label="绿化率" prop="greenCoverage">
            <el-input v-model="saveFrom.greenCoverage" placeholder="绿化率" style="width: 200px"/>
            %
          </el-form-item>
          <el-form-item label="楼栋数" prop="buildingCount">
            <el-input v-model="saveFrom.buildingCount" placeholder="楼栋数" style="width: 200px"/>
            栋
          </el-form-item>
          <el-form-item label="开发商" prop="developer">
            <el-input v-model="saveFrom.developer" placeholder="开发商" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="物业管理公司" prop="estate">
            <el-input v-model="saveFrom.estate" placeholder="物业管理公司" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="楼盘简介" prop="introduce">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="楼盘简介"
              style="width: 700px"
              v-model="saveFrom.introduce">
            </el-input>
          </el-form-item>

          <el-form-item label="周边配套">
            <el-button type="primary" @click="addzhoubian">增加</el-button>
            <div v-for="(item,index) in saveForm.zhouBianList">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="标题">
                    <el-input v-model="item.title" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="内容">
                    <el-input v-model="item.content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" @click="deletezhoubian(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
          <el-form-item label="交通">
            <el-button type="primary" @click="addCombo()">增加</el-button>
            <div v-for="(item,index) in saveForm.ComboList">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="标题">
                    <el-input v-model="item.title" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="内容">
                    <el-input v-model="item.content" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" @click="deleteCombo(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form-item>

          <el-form-item label="经纬度" prop="longItude">
            <el-input v-model="saveFrom.longItude" placeholder="请输入经度" style="width: 200px"/>
            <el-input v-model="saveFrom.latItude" placeholder="请输入纬度" style="width: 200px"/>
          </el-form-item>
        </el-form>
        <el-button type="warning" style="margin-left: 400px" @click="save()">提交</el-button>
      </el-tab-pane>

      <el-tab-pane label="相册管理" name="second">

      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<script>

import {addInfo, businessList, provinceList, subwayList} from "@/api/house/info";
import {BuildingTypeList, CommunityTypeList, PremisesTypeList, RemarkList} from "../../../api/house/info";

export default {
  name: "addPremisesInfo",
  data() {
    return {
      activeName: "",
      /** 表单 添加数据 */
      saveFrom: {},
      /** 省集合 */
      provinceList: {},
      /** 市集合 */
      cityList: {},
      /** 区集合 */
      countyList: {},
      /** 商圈 */
      commercialAreaList: [],
      commercialArea: [],
      /** 地铁 */
      subwayList: [],
      subway: [],
      /** 建筑类型 */
      buildingType: [],
      BuildingTypeList: [],
      /** 物业类型 */
      premisesType: [],
      PremisesTypeList: [],
      /** 社区类型 */
      communityType: [],
      CommunityTypeList: [],
      /** 楼盘特色 */
      remarkList: [],
      /** 表单校验 */
      rules: {},
      /** 提交 添加表单 */
      saveForm: {
        propertyList: [],
        zhouBianList: [],
        jiatong: [],
        ComboList:[]
      },
    }
  },
  methods: {
    /** 获取 省 的集合 */
    getProvinceList() {
      let parentId = 1;
      provinceList({parentId: parentId}).then(res => {
        this.provinceList = res.data
      })
    },

    /** 获取 根据省ID 获取对应的市 */
    getCity() {
      let parentId = this.saveFrom.province;
      provinceList({parentId: parentId}).then(res => {
        this.cityList = res.data
      })
    },

    /** 获取 根据市ID 获取对应的区 */
    getCounty() {
      let parentId = this.saveFrom.city;
      provinceList({parentId: parentId}).then(res => {
        this.countyList = res.data
      })
    },

    /** 根据 省ID 获取对应的 地铁线路 */
    getSubwayList() {
      let city = this.saveFrom.province;
      subwayList({city: city}).then(res => {
        this.subwayList = res.data
      })
    },

    /** 根据 区ID 获取对应的商圈 */
    getBusiness() {
      let county = this.saveFrom.county;
      businessList({county: county}).then(res => {
        this.commercialAreaList = res.data
      })
    },

    /** 获取 建筑类型 */
    getBuildingTypeList() {
      BuildingTypeList().then(res => {
        this.BuildingTypeList = res.data;
      });
    },

    /** 获取 社区类型 */
    getCommunityTypeList() {
      CommunityTypeList().then(res => {
        this.CommunityTypeList = res.data;
      });
    },

    /** 获取 物业类型 */
    getPremisesTypeList() {
      PremisesTypeList().then(res => {
        this.PremisesTypeList = res.data;
      });
    },

    /** 获取 楼盘特色 */
    getRemarkList() {
      RemarkList().then(res => {
        this.remarkList = res.data;
      })
    },

    /** 提交 */
    save() {
      console.log("楼盘信息", this.saveFrom.title);
      this.$refs['saveFrom'].validate(valId => {
        if (valId) {
          // addInfo(this.saveFrom).then(res => {
            this.$message.success("添加成功");
            this.$router.push("info")
          // });
        } else {
          console.log("不能提交");
          return false;
        }
      })
    },

    /** 动态添加行 删除行 */
    deletejiaotong(index) {
      this.saveForm.jiatong.splice(index, 1)
    },
    addjiaotong() {
      this.$message.success("11111");
      this.saveForm.jiatong.push({
        title: '',
        content: ''
      })
    },
    addzhoubian() {
      this.saveForm.zhouBianList.push({
        title: '',
        content: ''
      })
    },
    deletezhoubian(index) {
      this.saveForm.zhouBianList.splice(index, 1)
    },

    addCombo() {
      this.saveForm.ComboList.push({
        title: '',
        content: ''
      })
    },
    deleteCombo(index) {
      this.saveForm.ComboList.splice(index, 1)
    },

  },
  created() {
    /** 获取 省的集合 */
    this.getProvinceList();

    /** 获取  建筑类型 */
    this.getBuildingTypeList();

    /** 获取  社区类型 */
    this.getCommunityTypeList();

    /** 获取  物业类型 */
    this.getPremisesTypeList();

    /** 获取楼盘特色 */
    this.getRemarkList();
  }
}
</script>

<style scoped>
.a {
  margin-left: 200px;
}
</style>
